<template>
  <a-flex vertical gap="small" v-for="item in dataSource" :key="item.id"
          :class="['card-item',(item.status===1||item.status===2)?`card-${item.cardType}`:'card-lose']">
    <div class="fill">
      <a-flex gap="small" class="f1" align="center">
        <template v-if="item.status===1||item.status===2">
          <img class="icon" v-if="item.cardType==='100'" src="@/assets/images/card-100-1.png"
               alt=""/>
          <img class="icon" v-else-if="item.cardType==='200'" src="@/assets/images/card-200-1.png"
               alt=""/>
        </template>
        <template v-else-if="item.status===3">
          <img class="icon" v-if="item.cardType==='100'" src="@/assets/images/card-100-2.png"
               alt=""/>
          <img class="icon" v-else-if="item.cardType==='200'" src="@/assets/images/card-200-2.png"
               alt=""/>
        </template>

        <span class="text">{{ getLabel(proCardType, item.cardType) }}</span>
        <a-divider type="vertical" class="line"/>
        <span class="fill title">{{ item.cardName }}</span>
      </a-flex>
    </div>

    <a-flex gap="small" class="f2" align="center">
      <a-row class="fill" :gutter="[12,8]" align="middle">
        <template v-if="item.cardType==='100'">
          <a-col class="label" :span="6">产品折扣</a-col>
          <a-col class="value whitespace-nowrap" :span="18">{{ getProductDiscount(item) }}</a-col>
        </template>
        <a-col class="label" :span="6">使用期限</a-col>
        <a-col class="value" :span="18">{{ getValidDescDate(item) }}</a-col>

        <template v-if="item.cardType==='100'">
          <a-col class="label" :span="6">剩余金额</a-col>
          <!-- <a-col class="value" :span="18" v-html="getResidueAmountDesc(item)"></a-col> -->
          <a-col class="value" :span="18" style="display: flex;">
            <a-col v-html="getResidueAmountDesc(item)"></a-col>
            <a-col style="font-size: 11px; margin-top: 3px;">
              <span>(含赠金&nbsp;{{ item.remainBounsScore }})</span>
            </a-col>
          </a-col>
        </template>
        <template v-else>
          <a-col class="label" :span="6">剩余次数</a-col>
          <a-col class="value" :span="18" v-html="getResidueDesc(item)"></a-col>
        </template>
      </a-row>
      <div class="use btn" v-if="isSelect!==false &&(item.status===1||item.status===2)" @click="emit('select',item)" >
        选择
      </div>
    </a-flex>
  </a-flex>
</template>
<script setup>

import {defineOptions} from "vue";

import {
  getProductDiscount,
  getResidueAmountDesc,
  getResidueDesc,
  getValidDescDate,
  getValidDesc
} from "@/views/member/util.js";
import {getLabel, proCardType} from "@/api/ds.js";

const emit = defineEmits(['select']);

defineOptions({name: 'CardSelectItem'});

const props = defineProps({
  dataSource: {
    type: Array,
  },

  isSelect: {
    type: Boolean,
  }
});
</script>

<style lang="less" scoped>

.card-item {
  background-size: 100% 100%;
  width: calc(452px * 0.89);
  height: calc(164px * 0.89);
  background-repeat: no-repeat;
  background-position: center;

  .f1 {
    margin: 14px 16px 0 18px;
  }

  .f2 {
    margin: 0 16px 16px 18px;
  }

  .icon {
    width: 23px;
  }

  .title {
    font-weight: 500;
    font-size: 20px;
    line-height: 28px;
    font-style: normal;
  }

  .line {
    margin: 0;
  }

  .text {
    font-size: 12px;
  }

  .label,
  .value {
    font-size: 12px;
  }

  :deep(.remain) {
    font-size: 15px;
  }

  .btn {
    border-radius: 32px;
    padding: 3px 18px;

    font-weight: 500;
    font-size: 14px;
  }
}

.card-100 {
  background-image: url("@/assets/images/card-100.png");

  .title {
    color: #76491D;
  }

  .line {
    background-color: #C17084;
  }

  .text {
    color: #AF6E2F;
  }

  .label,
  .value {
    color: #76491D;
  }

  :deep(.remain) {
    color: #76491D;
  }

  .btn {
    border: 1px solid #C58444;
    color: #76491D;
  }
}

.card-200 {
  background-image: url("@/assets/images/card-200.png");

  .title {
    color: #871531;
  }

  .line {
    background-color: #C17084;
  }

  .text {
    color: #871531;
  }

  .label,
  .value {
    color: #BB4965;
  }

  :deep(.remain) {
    color: #BB4965;
  }

  .btn {
    border: 1px solid #EE6B8B;
    color: #871531;
  }
}

.card-lose {
  background-image: url("@/assets/images/card-lose.png");

  .title {
    color: #999;
  }

  .line {
    background-color: #999;
  }

  .text {
    color: #999;
  }

  .label,
  .value {
    color: #999;
  }

  :deep(.remain) {
    color: #999;
  }
}
</style>

